package modules

import (
	"fmt"
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/icon"
	"github.com/templui/templui/internal/components/separator"
	"github.com/templui/templui/internal/components/sheet"
	"github.com/templui/templui/internal/ctxkeys"
	"github.com/templui/templui/internal/shared"
	wrappedicon "github.com/templui/templui/internal/ui/icons"
)

func formatStars(count int) string {
	if count >= 1000 {
		return fmt.Sprintf("%.1fk", float64(count)/1000)
	}
	return fmt.Sprintf("%d", count)
}

templ Navbar() {
	<nav class="py-4">
		{{ stars := 0 }}
		{{
			if starsVal := ctx.Value(ctxkeys.GitHubStars); starsVal != nil {
				stars = starsVal.(int)
			}
		}}
		<div class="px-6 flex justify-between items-center relative">
			<div class="flex items-center">
				@NavbarMobileMenu()
				<a href="/" class="flex items-center gap-1.5">
					@icon.ToggleLeft(icon.Props{Class: "w-6 h-6"})
					<span class="text-xl">templ<span class="font-bold">UI</span></span>
				</a>
				<div class="hidden md:flex gap-1 items-center ml-6">
					@button.Button(button.Props{
						Variant: button.VariantGhost,
						Href:    "/docs/how-to-use",
					}) {
						Docs
					}
					@button.Button(button.Props{
						Variant: button.VariantGhost,
						Href:    "/docs/components",
					}) {
						Components
					}
					@button.Button(button.Props{
						Variant: button.VariantGhost,
						Href:    "/docs/themes",
					}) {
						Themes
					}
				</div>
			</div>
			<div class="flex gap-1 items-center justify-center">
				@button.Button(button.Props{
					Variant: button.VariantGhost,
					Href:    "https://github.com/templui/templui",
					Target:  "_blank",
					Class:   "gap-1",
				}) {
					@wrappedicon.GitHub(20)
					if stars > 0 {
						<span class="text-muted-foreground text-xs tabular-nums">{ formatStars(stars) }</span>
					}
				}
				@separator.Separator(separator.Props{
					Orientation: separator.OrientationVertical,
				})
				@ThemeSwitcher()
			</div>
		</div>
	</nav>
}

templ NavbarMobileMenu() {
	@sheet.Sheet(sheet.Props{
		Side: sheet.SideLeft,
	}) {
		@sheet.Trigger() {
			<button
				class="mr-2 lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-inset focus:ring-indigo-500"
			>
				@icon.Menu()
			</button>
		}
		@sheet.Content(sheet.ContentProps{
			Class: "!p-4",
		}) {
			<div class="flex-1 overflow-y-auto">
				<div class="space-y-4">
					<div class="pb-4">
						<h3 class="text-sm font-bold text-gray-600 dark:text-gray-400">Menu</h3>
						<ul class="mt-2 space-y-1">
							<li>
								<a
									href="/"
									class="text-sm inline-flex items-center px-3 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 w-full"
								>
									<span>Home</span>
								</a>
							</li>
							<li>
								<a
									href="/docs/how-to-use"
									class="text-sm inline-flex items-center px-3 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 w-full"
								>
									<span>Docs</span>
								</a>
							</li>
							<li>
								<a
									href="/docs/components"
									class="text-sm inline-flex items-center px-3 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 w-full"
								>
									<span>Components</span>
								</a>
							</li>
							<li>
								<a
									href="/docs/themes"
									class="text-sm inline-flex items-center px-3 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 w-full"
								>
									<span>Themes</span>
								</a>
							</li>
						</ul>
					</div>
					for _, section := range shared.Sections {
						<div class="pb-4">
							<h3 class="text-sm font-bold text-gray-600 dark:text-gray-400">{ section.Title }</h3>
							<ul class="mt-2 space-y-1">
								for _, link := range section.Links {
									<li>
										if link.Href == ctx.Value(ctxkeys.URLPathValue) {
											<a
												href={ templ.SafeURL(link.Href) }
												class={ "text-sm inline-flex items-center px-3 py-2 rounded-md text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 w-full" }
											>
												<span>{ link.Text }</span>
											</a>
										} else {
											<a
												href={ templ.SafeURL(link.Href) }
												class={ "text-sm inline-flex items-center px-3 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 w-full" }
											>
												<span>{ link.Text }</span>
											</a>
										}
									</li>
								}
							</ul>
						</div>
					}
				</div>
			</div>
		}
	}
}
